<!--
 * @Description: echart公共组件
 * @FilePath: \hk-computerRoom-Security\src\views\home\component\echarts-box.vue
 * @Date: 2024-01-16 11:14:01
 * @LastEditTime: 2024-02-21 16:39:52
-->
<template>
	<div class="echarts-box">
		<div class="box-head">
			<img class="pl15 pr10" src="../../../assets/images/home/icon-alarm.svg" alt="" />
			<span> {{ title }}</span>
		</div>

		<div class="echarts-area">
			<slot name="content"> </slot>
		</div>
	</div>
</template>
<script setup lang="ts">
defineProps({
	title: {
		type: String,
		required: true,
	},
});
</script>
<style lang="scss" scoped>
.echarts-box {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	pointer-events: all;
	.box-head {
		display: flex;
		align-items: center;
		width: 85%;
		height: 45px;
		background-image: url('../../../assets/images/home/echarts-head.svg');
		background-size: 100% 100%;
		color: #fff;
		font-size: 18px;
	}

	.echarts-area {
		flex: 1;
		overflow: hidden;
	}
}
</style>
